<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Frozen.aspx.cs" Inherits="Frozen" %>

<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
    Namespace="System.Web.UI" TagPrefix="asp" %>
<%@ Register Assembly="RealWorld.Grids" Namespace="RealWorld.Grids" TagPrefix="rwg" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Frozen Headers Sample</title>
    
<script language="javascript" type="text/javascript">


function MouseDown(row,bgColor,textColor)
{   
//debugger;
//determine which grid the row was clicked in
var grid = row.parentElement.parentElement.parentElement.id;

    if (grid == '__gvFrozenGrid__div')
    {
        //set the HiddenField with the row index
        var elem = document.getElementById('Grid1HFRowIndex');
        elem.value = row.rowIndex - 1;
        //set the before postback var with the index we just selected
        grid1RowIdBeforeServer = row.rowIndex - 1;
        
        if (row.getAttribute("Selected")=="true")    
        { 
            row.style.backgroundColor = row.getAttribute("OriginalColor");
            row.style.color = row.getAttribute("OriginalTextColor");
            row.setAttribute("Selected","false");       
        }
        else
        {
            row.style.backgroundColor = bgColor;
            row.style.color = textColor
            row.setAttribute("Selected","true");         
        }
    }
    
    if (grid == '__gvFrozenGridView1__div')
    {
        //set the HiddenField with the row index
        var elem2 = document.getElementById('Grid2HFRowIndex');
        elem2.value = row.rowIndex - 1;
        //set the before postback var with the index we just selected
        grid2RowIdBeforeServer = row.rowIndex - 1;
        
        if (row.getAttribute("Selected")=="true")    
        { 
            row.style.backgroundColor = row.getAttribute("OriginalColor");
            row.style.color = row.getAttribute("OriginalTextColor");
            row.setAttribute("Selected","false");       
        }
        else
        {
            row.style.backgroundColor = bgColor;
            row.style.color = textColor
            row.setAttribute("Selected","true");         
        }
    }


    
}
</script>

</head>
<body>
    <form id="form1" runat="server">
        <div>         
            <asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>
           <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
            <rwg:FrozenGridView ID="FrozenGrid" AutoGenerateColumns="False" Height="200px" Width="600" Scrolling="Both" runat="server" BorderStyle="Solid" AutoGenerateSelectButton="false" AllowSorting="true" OnSorting="FrozenGrid_Sorting"  OnRowClicked="FrozenGrid_RowClicked">
                <HeaderStyle BackColor="SteelBlue" ForeColor="White" BorderWidth="0px" />
                <columns>
                    <asp:ImageField DataImageURLField="Image" />
                    <asp:BoundField HeaderText="First Name" DataField="FirstName" SortExpression="FirstName" />
                    <asp:BoundField HeaderText="Last Name" DataField="LastName" />
                </columns>
            <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
            </rwg:FrozenGridView>
            <rwg:FrozenGridView ID="FrozenGridView1" AutoGenerateColumns="False" Height="200px" Width="600" Scrolling="Both" runat="server" BorderStyle="Solid" AutoGenerateSelectButton="false" OnRowClicked="FrozenGridView1_RowClicked">
                <HeaderStyle BackColor="SteelBlue" ForeColor="White" BorderWidth="0px" />
                <columns>
                    <asp:ImageField DataImageURLField="Image" />
                    <asp:BoundField HeaderText="First Name" DataField="FirstName" />
                    <asp:BoundField HeaderText="Last Name" DataField="LastName" />
                </columns>
            <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
            </rwg:FrozenGridView>
                <asp:Button ID="Button1" runat="server" Text="Button" OnClick="LoadGrid"  />
                <asp:HiddenField ID="HiddenFieldScrollTop" runat="server" />
                <asp:HiddenField ID="Grid1HFRowIndex" runat="server" />
                <asp:HiddenField ID="Grid2HFRowIndex" runat="server" />
            </ContentTemplate>
          </asp:UpdatePanel>
        </div>
    </form>
</body>
</html>
<script type="text/javascript">

var scrollTop;
var scrollTop1;
var grid1RowIdBeforeServer;
var grid1RowIdFromServer;
var grid2RowIdBeforeServer;
var grid2RowIdFromServer
  
    Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);
    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);

       function BeginRequestHandler(sender, args) 
       {
          var elem = document.getElementById('__gvFrozenGrid__div');
              scrollTop=elem.scrollTop;
              //var test = elem.lastChild.rows[2];
              //debugger;
              
          var elem1 = document.getElementById('__gvFrozenGridView1__div');
              scrollTop1=elem1.scrollTop;

          // is our rowid from server different than what we just selected?
          if (grid1RowIdFromServer != 'undefined' && grid1RowIdFromServer != "")
          {
              if (grid1RowIdFromServer != grid1RowIdBeforeServer)
              {               
                var elem3 = document.getElementById(grid1RowIdFromServer)
                elem3.style.backgroundColor = "white";
                elem3.style.color = "black";              
              }
          }
          
          //debugger;
          
          if (grid2RowIdFromServer != 'undefined' && grid2RowIdFromServer != "")
          {
              if (grid2RowIdFromServer != grid2RowIdBeforeServer)
              {
                
                var elem4 = document.getElementById(grid2RowIdFromServer)
                elem4.style.backgroundColor = "white";
                elem4.style.color = "black";
              
              }
          }

       }

       function EndRequestHandler(sender, args)
       {
           var elem = document.getElementById('__gvFrozenGrid__div');
               elem.scrollTop = scrollTop; 
               
           var elem2 = document.getElementById('HiddenFieldScrollTop');
           var test = elem2.value;
           //debugger;
           if (test == "True")
           {
               scrollTop1 = 0;
           }
           var elem1 = document.getElementById('__gvFrozenGridView1__div');
               elem1.scrollTop = scrollTop1; 
             
           //debugger;
           var elem3 = document.getElementById('Grid1HFRowIndex');
           if (elem3.value != "")
           {
               elem4 = document.getElementById(elem3.value);
               elem4.style.backgroundColor = "blue";
               elem4.style.color = "white";
           }
           grid1RowIdFromServer = elem3.value;
           
           
           var elem5 = document.getElementById('Grid2HFRowIndex');
           if (elem5.value != "")
           {
               elem6 = document.getElementById(elem5.value);
               elem6.style.backgroundColor = "blue";
               elem6.style.color = "white";
           }
           grid2RowIdFromServer = elem5.value;
       }   
    
</script>